<template>
  <div class="main">
    <div>
      <div
        class="s-box"
        style="color: var(--main-text-color); background-color: var(--main-text-backgroundColor)"
      >
        <!-- <Switch v-model:checked="deviceOneStatus" />
      <Switch v-model:checked="deviceTwoStatus" />
      <Switch v-model:checked="deviceThreeStatus" /> -->
        <div class="title" v-if="isTitle">{{ cardTitle }}</div>
        <Form :model="formData" layout="vertical">
          <Form.Item label="" name="deviceOneStatus">
            <Switch v-model:checked="formData.deviceOneStatus" /><span
              class="ml-2 tip"
              style="color: var(--main-text-color)"
              >烟感设备</span
            >
          </Form.Item>
          <Form.Item label="" name="deviceTwoStatus">
            <Switch v-model:checked="formData.deviceTwoStatus" /><span
              class="ml-2 tip"
              style="color: var(--main-text-color)"
              >用电设备</span
            >
          </Form.Item>
          <Form.Item label="" name="deviceThreeStatus">
            <Switch v-model:checked="formData.deviceThreeStatus" /><span
              class="ml-2 tip"
              style="color: var(--main-text-color)"
              >用水设备</span
            >
          </Form.Item>
        </Form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
  import { Form, Switch } from 'ant-design-vue';
  const props = defineProps({
    widgetData: {
      type: Object,
    },
    isResize: {
      type: Boolean,
    },
    dashboard: {
      type: Boolean,
    },
  });

  const isTitle = ref<boolean>(true);
  const cardTitle = ref<string>('开关控制');
  const formData = ref<any>({
    deviceOneStatus: false,
    deviceTwoStatus: false,
    deviceThreeStatus: false,
  });

  watch(
    () => props.widgetData,
    (nVal: Recordable) => {
      if (!nVal) return;
      if (Object.keys(nVal).length === 0) return;
      const { showTitle, title, color, backgroundColor } = nVal;
      isTitle.value = showTitle;
      cardTitle.value = title;
      document.documentElement.style.setProperty('--main-text-color', color); // 改变颜色值
      document.documentElement.style.setProperty('--main-text-backgroundColor', backgroundColor); // 改变颜色值
    },
    {
      immediate: true,
      deep: true,
    },
  );

  onMounted(() => {
    document.documentElement.style.setProperty('--main-text-color', 'rgba(0, 0, 0, 0.65)'); // 改变颜色值
    document.documentElement.style.setProperty('--main-text-backgroundColor', '#fff'); // 改变颜色值
  });
  onBeforeUnmount(() => {});
</script>
<style lang="less" scoped>
  .main {
    display: flex;
    justify-content: center;
    margin-top: 10%;
  }

  .s-box {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    height: auto;
    // align-items: center;
    .title {
      font-size: 18px;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 10px;
    }
  }

  .tip {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
  }

  :root {
    --main-text-color: rgba(0, 0, 0, 0.65); /* 默认颜色 */
    --main-text-backgroundColor: #fff;
  }
</style>
